<template>
   <div class="comment">
      <div class="h1">
        <h2> {{ "评论列表" }}</h2>
        <!-- <h1>{{ MyTitle }}</h1> -->
      </div>
       <!-- <h1>{{ this.$store.state.user.comment }}</h1> -->
      <div class="input">
        <img  class="i" :src="'http://localhost:8889'+'/'+ this.imgSrc+'.jpg'" title="点击修改用户头像"/>  <div class="username">{{ this.myUser[0].name }}</div>
        <div>
         <el-input
        
  type="textarea"
  autosize
  placeholder="请输入内容"
  v-model="textarea"
 class="userInput">
</el-input>
<el-button round size="small" type="primary" @click="sendComment(MyTitle)" class="btn">提交</el-button>
        </div>
         
      </div>
      <div class="content" v-for="(item,index) in comments" :key=index

      >
         <div class="user">
            <img  class="i" :src="'http://localhost:8889'+'/'+item.imgSrc+'.jpg'" title="点击修改用户头像"/> 
      <div class="name">{{ item.name }}:</div>
      <div class="context">
         {{ item.content }}  <span class="date">{{ "评论日期："+item.date }}</span>       <span @click="del(index,comments[index].content,comments[index].imgSrc)" class="del">删除评论</span>
      </div>
         </div>
     
    
        

      </div>


   </div>   
</template>


<script>





 export default{
 
   props:["MyTitle"]

   
,
     data(){
        return{
         name:"",
          date:"",
          imgSrc:"",
           myUser:[],
           textarea:"",
           comments:[
        
           ],
           id:null
        

          
        }
     } ,
     created(){
      this.myUser=JSON.parse(localStorage.getItem("user"))
      this.imgSrc=JSON.parse(localStorage.getItem("user"))[0].imgSrc
      this.id=JSON.parse(localStorage.getItem("user"))[0].id
      this.getComment()
     
     
     }
     ,
    
   //   beforeUpdate(){
   //   this.getComment()
   //   },
     computed:{
          comment(){
             return this.$store.state.user.comment
          }
     }
     ,
    methods:{
      addName(){
//   console.log(this.myUser[0].name)
       this.$axios({
          method:"get",
          url:this.$host+"/addName",
          params:{
              names:this.myUser[0].name
          }
       })
      },
      sendComment(MyTitle){
         // console.log(MyTitle)
         let yy = new Date().getFullYear();
		      let mm = new Date().getMonth()+1;
		      let dd = new Date().getDate(); 
            let hh = new Date().getHours();
		      let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
           this.comments.push({
            date:yy+'-'+mm+'-'+dd,
              imgSrc:this.imgSrc,           
              name:JSON.parse(localStorage.getItem("user"))[0].name,
              content:this.textarea
           })
         
         //   this.date=yy+'-'+mm+'-'+dd+'-'+hh+'-'+mf
           this.$axios({
           method:"get",
           url:this.$host+"/addComment",
           params:{
           imgSrc:this.imgSrc,
           date:yy+'年-'+mm+'月-'+dd+'日'+'\u00a0'+'\u00a0'+hh+'时:'+mf+"分",
           name:this.myUser[0].name,
           content:this.textarea,
           MyTitle:MyTitle
           }
          
      }).then(resp=>{
       this.getComment()
        
      })
      this.textarea=""   
      },
      del(index,content,imgSrc)
      {  
         if(imgSrc!= this.imgSrc){
              alert("抱歉，你不能删除别人的评论")
         }else if(imgSrc==this.imgSrc){
            this.comments.splice(index,1)
            
            this.$axios({
           method:"get",
           url:this.$host+"/delComment",
           params:{
             content:content
           }
          
      }).then(resp=>{
         this.getComment()
      })

         }
         
         //  console.log(content)
         //  console.log(JSON.parse(localStorage.getItem("user"))[0].imgSrc)
       

            
      },
      getComment(){
         this.$axios({
           method:"get",
           url:this.$host+"/getComment",
           params:{
           imgSrc:this.imgSrc,
         MyTitle:localStorage.getItem("MyTitle")

           }
          
      }).then(resp=>{
         let commentData=resp.data
         this.$store.dispatch("comment",commentData)  
           
             this.comments=[]
           this.comments=resp.data
      })

      }
      
     },
    
    
 }

</script>

<style scoped>
h2{
    color: blue;
    margin-bottom: 50px;
}
.h1{
   position: relative;
   right: 70px;
}
.date{
    margin-left: 100px;
}
.comment{
    margin-left: 127px;
  
    margin-bottom: 100px;
}
.context{
    height: 40px;
    line-height: 40px;
    margin-left: 18px;
}

.btn{
    margin-left: 8px;
}

img{
   width: 40px;
    height: 40px;
    border-radius: 50%;
}
.input{
     display: flex;
   
}
.userInput{
    width: 420px;
    margin-left: 6px;
    margin-top: 2px;
    
}
.user{
    display: flex;
}
.name{
   color: blue;
    height: 40px;
      line-height: 40px;
      margin-left: 6px;
}
.del{
     color: blue;
     cursor: pointer;
}
.username{
   color: blue;
     line-height: 40px;
     margin-left: 5px;
}
.content{
    margin-top: 32px;
}
</style>
